<template>
    <div class="root">
        <div class="cascader">
            <Cascader :data="data" @on-change="handleChange" trigger="hover" clearable></Cascader>
        </div>
        <div>
            <note-list 
                @editCurrentNotes="edit" 
                @delCurrentNotes="del"
                v-for="(item,index) in noteListArr" :key="index" 
                :item="item">
            </note-list>
        </div>
        <Modal
        v-model="editNotesModal"
        title="编辑笔记"
        width="360"
        :mask-closable="false">
            <Input type="textarea" placeholder="在此输入文字" :rows="10" v-model="content"/>
            <div slot="footer">
                <Button type="success" @click="sureEditResult">确定</Button>
            </div>  
        </Modal>
    </div>
</template>

<script>
import noteList from '@/components/education/lists/noteList';
import { mapActions,mapGetters } from 'vuex';
import { cascaderData } from '@/utils/format';
export default {
    components:{noteList},
    computed:{
        ...mapGetters({
            allPart:"allPart",
        }),
    },
    data(){
        return{
            data:[],
            editNotesModal:false,
            content:"",
            editSendObject:{},
            noteListArr:[],
        }
    },
    methods:{
        ...mapActions(['XgetNoteList','XdelNote','XmodifyNote']),
        handleChange(value){
            this.XgetNoteList({
                videoId:value[1]
            }).then(res => {
                this.noteListArr = res.data.reverse()
            })
        },
        edit(emitObject){
            this.content = emitObject.content
            this.editSendObject = emitObject;
            this.editNotesModal = true;
        },
        sureEditResult(){
            this.editSendObject.content =  this.content;
            this.XmodifyNote(this.editSendObject).then(res => {
                this.$Message.success("编辑成功");
                this.editNotesModal = false;
                this.mountNotesList();
            }).catch(err => {
                this.$Message.error(err.response.data.message);
            })
        },
        del(note_id){
            this.XdelNote(note_id).then(res => {
                this.$Message.success("删除成功");
                this.mountNotesList();
            }).catch(err => {
                this.$Message.error(err.response.data.message);
            })
        },
        mountedList(){
            this.XgetNoteList({
                videoId:""
            }).then(res => {
                if(res.data){
                    this.noteListArr = res.data.reverse()
                }
            })
        }
    },
    created(){
        this.data = cascaderData(this.allPart)
    },
    mounted(){
        this.mountedList()
    }
}
</script>

<style lang="scss" scoped>
    .cascader{
        width:200px
    }
</style>
